<!DOCTYPE html>
<html lang="pt-br">
    <head>

        <meta charset="utf-8">

        <title>My Route</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Estilos -->
        <link href="../css/myroute.css" rel="stylesheet">
        <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">


        <!--TESTE-->
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../bootstrap/js/bootstrap-popover.js"></script>
        <!-- Inclusão do Jquery -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js " ></script>
        <!-- Inclusão do Jquery Validate -->
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js " ></script>



        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="../js/formCadastro.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#termos').modal('hide');
            });
        </script>

        <script src="../js/jquery-latest.js"></script>
        <script type="text/javascript" src="../js/jquery.validate.js"></script>

        <style>
            input.error { border: 1px solid red; width: auto; }
            label.error { color: red; float: right; }
        </style>

    </head>

    <body>

        <div class="header">
            <div class="logo">
                <img style="height: 60px" src="../imagens/my.route.png">
            </div>
            <div class="well"> 
                <a href="login.php" role="button" class="btn btn-inverse pull-right btn-header">Login</a>
            </div>
        </div>

        <div class="container">
            <div class="row-fluid">
                <h3 class="textoTitulo">Junte-se a nós!</h3>
            </div>

            <div class="row-fluid">
                <div class="span8">
                    <div class="layout">
                        <div class="imagens">
                            <img src="..\imagens\world.png">
                        </div>
                        <div class="texto">
                            <h3 class="tituloBanner">Para qualquer lugar</h3>
                            <p class="textoCorpo">De onde você estiver e para onde quiser ir</p>
                        </div>
                    </div>
                    <div class="layout">
                        <div class="imagens">
                            <img src="..\imagens\people.png" >
                        </div>
                        <div class="texto">
                            <h3 class="tituloBanner">Todos seus amigos</h3>
                            <p class="textoCorpo">Encontre seus amigos caroneiros em toda a parte</p>

                        </div>
                    </div>
                    <div class="layout">
                        <div class="imagens">
                            <img src="..\imagens\PC.png">
                        </div>
                        <div class="texto">
                            <h3 class="tituloBanner">De qualquer lugar</h3>
                            <p class="textoCorpo">A qualquer momento de qualquer lugar, com <a class="text-info">my.route</a> você pega carona de qualquer dispositivo</p>
                        </div>
                    </div>
                </div>

                <div class="span4 pull-left">         											
                    <form class="well" name="cadastro" action="../controler/ControlerCadastro.php" method="post">
                        <!-- Valor escondido do Controler-->
                        <input type="hidden" id="option" name="option" value="1">
                        <div class="form-inline">
                            <label class="login">Cadastro</label>
                            <img class="pull-right" style="height: 16px; margin-top: 10px" src="..\imagens\my.route_opaco.png">
                        </div>
                        <div class="controls">
                            <div class="form-inline">
                                <label for="fld-nome" class="textoForm" style="width: 50%">Nome</label>
                                <label for="fld-nome" class="textoForm">Sobrenome</label>
                            </div>
                            <div class="control-group" style="position: relative; margin-bottom: 0px;">
                                <input style="float: left; margin-right: 8px; " type="text" rel="popover" data-placement="left" class="span6" name="nome" id="nome">
                            </div>
                        </div>
                        <div class="controls" >

                            <div class="control-group">
                                <input style="" type="text" class="span6" name="sobrenome" rel="popover" data-placement="left" id="sobrenome">
                            </div>
                        </div>
                        <div class="controls">
                            <label for="fld-email" class="textoForm">E-mail</label>
                            <div class="control-group">
                                <input type="email" name="email" rel="popover" data-placement="left" class="span12" id="email">
                            </div>
                        </div>
                        <div class="controls">
                            <label for="fld-senha" class="textoForm">Senha</label>
                            <div class="control-group">
                                <input type="password" rel="popover" data-placement="left" class="span6" id="senha" name="senha">
                            </div>
                        </div>
                        <div class="controls">
                            <label for="fld-confsenha" class="textoForm">Confirme a senha</label>
                            <div class="control-group">
                                <input type="password" rel="popover" data-placement="left" class="span6" id="confsenha" name="confsenha">
                            </div>
                        </div>
                        <div class="controls">

                            <label for="fld-dia" class="textoForm">Data de nascimento</label>
                            <div class="controls controls-row:before">
                                <div class="control-group">
                                    <input type="text" class="span4" id="dia" name="dia" placeholder="Dia">
                                    <select name="mes" id="mes" class="span4">
                                        <option value="1">Janeiro</option>
                                        <option value="2">Fevereiro</option>
                                        <option value="3">Março</option>
                                        <option value="4">Abril</option>
                                        <option value="5">Maio</option>
                                        <option value="6">Junho</option>
                                        <option value="7">Julho</option>
                                        <option value="8">Agosto</option>
                                        <option value="9">Setembro</option>
                                        <option value="10">Outubro</option>
                                        <option value="11">Novembro</option>
                                        <option value="12">Dezembro</option>
                                    </select>
                                    <input type="text" class="span4" id="ano" name="ano" placeholder="Ano">
                                </div>
                            </div>
                        </div>
                        <div class="controls">
                            <label for="fld-sexo" class="textoForm">Sexo</label>
                            <select name="sexo" id="sexo" class="span6">
                                <option value="m">Masculino</option>
                                <option value="f">Feminino</option>
                            </select>
                        </div>


                        <div class="captcha"><!--Inicio do re-captcha-->
                            <script type="text/javascript">
                                var RecaptchaOptions = {
                                    theme : 'white'
                                };
                            </script>
                            <script type="text/javascript"
                                    src="http://www.google.com/recaptcha/api/challenge?k=6LfgiNgSAAAAABgT-_bmBucgaVkYykHia8CWCQvo">                                                        
                            </script>
                            <noscript class="captcha">
                            <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfgiNgSAAAAABgT-_bmBucgaVkYykHia8CWCQvo"
                                    height="300" width="500" frameborder="0"></iframe><br>
                            <textarea name="recaptcha_challenge_field" rows="3" cols="40">
                            </textarea>
                            <input type="hidden" name="recaptcha_response_field"
                                   value="manual_challenge">
                            </noscript>
                        </div><!--Fim do re-captcha-->
                        <div class="controls">
                            <label class="checkbox">
                                <input type="checkbox"> Concordo com os <a href="#termos" role="button" data-toggle="modal">Termos de Serviço</a> e <a href="#">Política de Privacidade</a> do My.Route.
                            </label>
                        </div>
                        <div class="controls">	
                            <input type="submit" class="btn btn-primary" value="Cadastrar">
                        </div>
                    </form>
                </div><!--/row-->
            </div>
        </div><!--container-->

        <div id="termos" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; ">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Termos de Serviço</h3>
            </div>
            <div class="modal-body">

                <div class="well">

                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" value="Salvar" class="btn btn-primary">Concordo</button>
                <button class="btn" data-dismiss="modal"><i class="icon-remove"></i>Discordo</button>
            </div>
        </div> <!--Fim Modal -->

        <footer>
            <p>&copy; My Route</p>
        </footer>


        <!-- Javascript-->
        <script src="../bootstrap/js/jquery.js"></script>
        <script src="../bootstrap/js/bootstrap-transition.js"></script>
        <script src="../bootstrap/js/bootstrap-alert.js"></script>
        <script src="../bootstrap/js/bootstrap-modal.js"></script>
        <script src="../bootstrap/js/bootstrap-dropdown.js"></script>
        <script src="../bootstrap/js/bootstrap-scrollspy.js"></script>
        <script src="../bootstrap/js/bootstrap-tab.js"></script>
        <script src="../bootstrap/js/bootstrap-tooltip.js"></script>
        <script src="../bootstrap/js/bootstrap-popover.js"></script>
        <script src="../bootstrap/js/bootstrap-button.js"></script>
        <script src="../bootstrap/js/bootstrap-collapse.js"></script>
        <script src="../bootstrap/js/bootstrap-carousel.js"></script>
        <script src="../bootstrap/js/bootstrap-typeahead.js"></script>

    </body>
</html>
